<template>
  <div class="ai-export">
    <Navbar title="导出报告" foo-back @back="handleBack" />
    <div class="content">
      {{ content }}
    </div>
    <div class="footer">
      <div class="btn-download" @click="download">下载</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from '@/components/Navbar/index.vue'
import { useUserStore } from '@/store'

const props = defineProps<{
  content: string
  id: string
}>()

const emit = defineEmits(['close'])

const handleBack = () => {
  emit('close')
}

const { token } = useUserStore()

const url = `${import.meta.env.VITE_APP_BASE_API}/${
  import.meta.env.VITE_APP_SREVICE_NAME_CITY_MANAGEMENT
}/qa/downloadReport?key=${props.id}&token=${token}`
const download = () => {
  const a = document.createElement('a')
  a.href = url
  a.click()
}
</script>

<style lang="less" scoped>
.ai-export {
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  .content {
    white-space: pre-line;
    line-height: 1.5;
    flex-grow: 1;
    overflow-y: scroll;
    word-break: break-all;
    padding: 12px;
  }

  .footer {
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    .btn-download {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 25px;
      background: #3a75c5;
      box-shadow: 0px 2px 5px 0px #00000019;
      height: 44px;
      width: 320px;
      margin-left: 27.5px;

      color: #ffffff;
      font-weight: bold;
      font-size: 16px;
    }
  }
}
</style>
